<!DOCTYPE html>
<html>
<head>
    <title></title>
    <script src="http://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body onload="draw()">
    <canvas id="mycanvas" width="150" height="200px"></canvas>
    <script>
        function draw() {
            const canvasId = $("#mycanvas")[0];
            const ctx  = canvasId.getContext && canvasId.getContext("2d");
            for (let i = 0; i < 4; i++) {
                for (let j = 0; j < 3; j++) {
                    ctx.beginPath();
                    const x = 25 + j * 50,
                        y = 25 + i * 50,
                        radius = 20,
                        startAngle = 0,
                        endAngle = Math.PI + (Math.PI * j) / 2,
                        anticlockwise = i % 2 === 0 ? false : true;
                    ctx.arc(x, y, radius, startAngle, endAngle, anticlockwise);
                    if (i > 1) {
                        ctx.fill();
                    } else {
                        ctx.stroke();
                    }
                }
            }
        }
    </script>
</body>
</html>